<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Pure CSS3 Create Dock</title>
<style type="text/css" media="screen">
body {
	margin: 0;
	padding: 0;
	font: normal 14px/1.5 "PT Sans", Helvetica, Arial, sans-serif;
	background: rgb(30, 30, 30);
	color: rgb(220, 220, 220);
}

.wrapper {
	position: absolute;
	top: 48%;
	left: 50%;
	width: 660px;
	height: 340px;
	margin: -190px 0 0 -330px;
}

.content {
	position: relative;
	width: 660px;
	height: 340px;
	overflow: hidden;		
	background: rgb(15, 15, 15) url(images/bg.jpg) no-repeat center bottom;
	border-radius: 10px;
	box-shadow: 0 1px 10px rgb(10, 10, 10);
}

h1 {
	margin-top: 1.5em;
	color: rgba(255, 255, 255, .9);
	line-height: 1;
	font-size: 70px;
	text-align: center;
	font-weight: bold;
	text-shadow: 0px 1px 5px rgb(255, 160, 55), 0px 1px 15px rgb(255, 160, 55);
	cursor: default;
}

h1 em {
	display: inline-block;
	font-size: .29em;
	font-style: normal;
	vertical-align: top;
	margin-left: -.4em;
	padding-top: .46em;
}

/* css dock style*/
@-webkit-keyframes bounce {
	  0% { -webkit-transform: translateY(0); }
	100% { -webkit-transform: translateY(-20px); }
}

@-moz-keyframes bounce {
	  0% { -moz-transform: translateY(0); }
	100% { -moz-transform: translateY(-20px); }
}
@-o-keyframes bounce {
	  0% { -o-transform: translateY(0); }
	100% { -o-transform: translateY(-20px); }
}

@-ms-keyframes bounce {
	  0% { -ms-transform: translateY(0); }
	100% { -ms-transform: translateY(-20px); }
}
@keyframes bounce {
	  0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}

.dock {
	position: absolute;
	bottom: 0;
	z-index: 10;
	width: 100%;
	text-align: center;
	font: normal 14px/1 'Lucida Grande', Arial, sans-serif;
}

.dock ul {
	position: relative;
	display: inline-block;
	padding: 0 5px;
	margin: 0;
}
.dock li {
	display: inline-block;
	position: relative;
	margin: 0 1px;
	margin-bottom: 15px;
	vertical-align: baseline;
	-webkit-box-reflect: below -16px -webkit-gradient(
		linear, left top, left bottom,
		from(transparent),
		color-stop(91%, rgba(255, 255, 255, .1)),
		color-stop(91.01%, transparent),
		to(transparent)
	);
}

.dock a {
	display: inline-block;
	cursor: default;
	outline: none;
}
.dock li:target a {
	-webkit-animation: bounce .3s 6 alternate ease-out;
	-moz-animation: bounce .3s 6 alternate ease-out;
	-o-animation: bounce .3s 6 alternate ease-out;
	-ms-animation: bounce .3s 6 alternate ease-out;
	animation: bounce .3s 6 alternate ease-out;
}
.dock li:after {
	content: " ";
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 5px;
	height: 5px;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(255, 255, 255, .8);
	margin-left: -2px;
	border-radius: 5px;
	box-shadow:
		inset 0 1px 3px rgba(75, 255, 255, .4),
		0 0 4px rgba(75, 255, 255, .5),
		0 -1px 7px rgb(75, 255, 255);
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
}
.dock li:target:after {
	visibility: visible;
	opacity: 1;
}
.dock em {
	position: absolute;
	top: -34px;
	left: 50%;
	display: none;
	width: 150px;
	margin-left: -75px;
	text-align: center;
}
.dock em:after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, .6);
	border-bottom: none;
}
.dock em span {
	display: inline-block;
	padding: 5px 12px;
	font-size: 14px;
	font-style: normal;
	color: #FFF;
	background: #000;
	background: rgba(0, 0, 0, .6);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
	border-radius: 12px;
}

.dock li:hover em, 
.dock li a:focus em {
	display: block;
}
.dock img {
	width: 86px;
	height: auto;
	border: none;
	-webkit-transition: width .2s, height .2s;
	-moz-transition: width .2s, height .2s;
	-o-transition: width .2s, height .2s;
	-ms-transition: width .2s, height .2s;
	transition: width .2s, height .2s;
}

.dock li:hover img, 
.dock li a:focus img {
	width: 96px;
}

.dock li:active img {
	opacity: .9;
}	
.dock-container {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.dock-panel {
	width: 560px;
	height: 100px;
	background: -webkit-linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	background: linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-moz-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-o-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-ms-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	position: relative;
	left: 50%;
	margin-left: -280px;
	bottom: -50px;
}
</style>	
</head>
<body>
	<div class="wrapper">
		<div class="content">
			<h1>CSS Dock</h1>
			<div class="dock">
				<ul>
					<li id="mail">
						<a href="#mail">
							<em><span>Mail</span></em>
							<img src="images/icon-mail.png" alt="Mail">
						</a>
					</li>
					<li id="ical">
						<a href="#ical">
							<em><span>iCal</span></em>
							<img src="images/icon-ical.png" alt="iCal">
						</a>
					</li>
					<li id="addressbook">
						<a href="#addressbook">
							<em><span>Address Book</span></em>
							<img src="images/icon-addressbook.png" alt="Address Book">
						</a>
					</li>
					<li id="iphoto">
						<a href="#iphoto">
							<em><span>iPhoto</span></em>
							<img src="images/icon-iphoto.png" alt="iPhoto">
						</a>
					</li>
					<li id="idisk">
						<a href="#idisk">
							<em><span>iDisk</span></em>
							<img src="images/icon-idisk.png" alt="iDisk">
						</a>
					</li>
				</ul>
			</div>
			<div class="dock-stage">
					<div class="dock-container">
						<div class="dock-panel"></div>
					</div>
				</div>
		</div>
	</div>
</body>
</html>